<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>gird布局</title>
        <style>
            body {
                background-color: rgb(191, 194, 188);
                margin: 0;
                padding: 0;
            }

            #container {
                width: 600px;
                height: 400px;
                margin: 20px auto;
                padding: 5px;
                border: 1px solid rgb(19, 19, 19);
            }

            #container {
                /* grid布局 自动填充宽高 */
                display: grid;

                /* 
                    fr: fraction片段单位       
                    grid-template-columns: 50px 1fr 2fr;  子级元素第一列宽为50px。第二列和第三列子级元素平分剩余父级元素宽度，其中第三列宽度是第二列的两倍。

                    repeat(): 接受两个参数，分别是重复个数和元素尺寸
                    grid-template-columns: repeat(3, 33.33%);  子级元素列宽为33.33%，重复3个。


                    auto: 浏览器子级决定尺寸 默认内容实际大小
                    grid-template-columns: 1fr auto 2fr;  子级元素第二列宽度由浏览决定 (默认是实际内容宽度)。

                    minmax(): 接受两个参数，分别为最小值和最大值
                    grid-template-columns: 100px auto min(80px,200px);  子级元素第三列最小宽度为80px，最大为200px。

                */

                /* 设置子级元素 列宽 */
                grid-template-columns: 50px;
                grid-template-columns: 100px auto min(80px, 200px);
                /* 设置子级元素 行高 */
                grid-template-rows: 50%;

                /* 设置网格 列 间隙 */
                grid-column-gap: 10px;
                /* 设置网格 行 间隙 */
                grid-row-gap: 5px;

                /* 网格布局“区域” 命名*/
                grid-template-areas:
                    '. header header'
                    '. main sider' /* . 为空网格单元 */
                    'footer footer footer';
                
                /* 子级元素排列顺序 row先行后列（默认） /column先列后行  / row dense"先行后列"，并且尽可能紧密填满，尽量不出现空格 / column dense"先列后行"，并且尽可能紧密填满，尽量不出现空格*/
                /* grid-auto-flow:row dense;   */

                /* 在网格里的每个子级元素的-水平- >左中右<
                        start  对齐单元格的起始边缘。
                        end  对齐单元格的结束边缘。
                        center  单元格内部居中。
                        stretch  拉伸，占满单元格的整个宽度（默认值）。
                */
                justify-items: stretch;

                /* 在网格里的每个子级元素的-垂直- >上中下< 
                        start  对齐单元格的起始边缘。
                        end  对齐单元格的结束边缘。
                        center  单元格内部居中。
                        stretch  拉伸，占满单元格的整个宽度（默认值）。
                */
                align-items: stretch;

                /* 容器中网格的位置-水平- >左中右< 
                    start 对齐容器的起始边框
                    end   对齐容器的结束边框
                    center  对齐容器的中间
                    stretch 项目大小没有指定时，拉伸占据整个网格容器（默认值）
                    space-around 每个项目两侧的间隔相等。
                    space-between  项目与项目的间隔相等，项目与容器边框之间没有间隔。
                    space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
                */
                justify-content:stretch ;


                 /* 容器中网格的位置-垂直- >上中下< 
                    start 对齐容器的起始边框
                    end   对齐容器的结束边框
                    center  对齐容器的中间
                    stretch 项目大小没有指定时，拉伸占据整个网格容器（stretch）
                    space-around 每个项目两侧的间隔相等。
                    space-between  项目与项目的间隔相等，项目与容器边框之间没有间隔。
                    space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
                */
                align-content: stretch;


            }

            .box:nth-child(1){
                background-color: orange;
                 /* 
                    子级元素的定位
                        grid-column-start属性  左边框所在的垂直网格线
                        grid-column-end属性  右边框所在的垂直网格线
                        grid-row-start属性  上边框所在的水平网格线
                        grid-row-end属性  下边框所在的水平网格线

                    简写: grid-area:  <row-start> / <column-start> / <row-end> / <column-end>  | 父级定义的“区域”名字;
                */
                /* grid-area: main; */
                /* grid-area: 2 / 2 / 4 / 4;  /* 水平2-4 垂直2-4 具有扩大宽高的能力 */
                        justify-self: self-start;
                /* 
                    justify-self 、align-self 属性。功能跟justify-items和align-items 参数一模一样，只是作用于单个子级元素。
                */
            }
            .box:nth-child(2){

                /* 
                    单个子级元素合并
                        垂直合并 grid-column: span x
                        水平合并 grid-row: span 3  水平合并3个子级单元 
                    
                */
                /* grid-row: span 2; */
                /* grid-column: span 3; */
            }

            .box {
                /* margin: 5px; */
                border-radius: 5px;
                background-color: rgb(48, 153, 123);
            }
            .box:nth-child(even) {
                background-color: rgb(106, 71, 143);
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
        </div>
    </body>
</html>
